<template>
  <div class="car">
    这是购物车
    <div class="box"></div>
  </div>
</template>

<script>
  // 单文件组件 -> 一个.vue文件就是一个组件 (template script style)
// @ is an alias to /src
export default {
  name: 'CarView',
  components: {
  }
}

</script>


<style scoped>
  /* 
    如果不添加scoped -> 当前style对所有元素生效 => 全局样式
    如果添加scoped -> 1. webpack解析当前.vue文件时,会给template中的每一个元素添加自定义属性(当前Vue文件绑定的唯一id) 2.在解析style时,给style中的选择器末尾拼接属性选择器[data-v-6a93c28d]  => 局部样式,只对当前页面有效
  
  */


  .box{  /* .box[data-v-6a93c28d]  => class名为.box,且带有自定义属性[data-v-6a93c28d]的元素  -> 只有当前页面有 */
    width: 2rem;
    height: 2rem;
    background-color: #6ff;
    
  }

</style>
